<template>
    <a-card title="停车任务管理" :bordered="false">


        <!-- Card Header -->


            <a-form-model slot="extra" layout="inline" @submit.prevent="searchSubmit">


                <a-form-model-item>
                    <a-select placeholder="任务类型" allowClear
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.type" style="width: 150px">
                        <a-select-option v-for="(item, index) in TaskTypeOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item>
                    <a-select placeholder="任务状态" allowClear
                              showSearch :filter-option="$exMod.cxOption"
                              v-model="searchForm.status" style="width: 150px">
                        <a-select-option v-for="(item, index) in TaskStatusOPT" :key="index" :value="item.value">
                            {{item.label }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

                <span v-show="expansion">

                    <a-form-model-item class="width150">
                        <a-input v-model="searchForm.plateNo"
                                 :allowClear="$store.getters.allowClear"
                                 placeholder="车牌号"></a-input>
                    </a-form-model-item>

                    <a-form-model-item class="width150">
                        <a-input v-model="searchForm.placeName" :allowClear="$store.getters.allowClear"
                                 placeholder="场地名称"></a-input>
                    </a-form-model-item>


                    <a-form-model-item>
                        <a-input
                                style="width: 150px;"
                                v-model="searchForm.seatCode"
                                :allowClear="$store.getters.allowClear"
                                placeholder="车位"></a-input>
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-input
                                style="width: 150px;"
                                v-model="searchForm.finishCashierName"
                                :allowClear="$store.getters.allowClear"
                                placeholder="执行人姓名"></a-input>
                    </a-form-model-item>


                    <a-form-model-item>
                        <a-range-picker  style="width: 250px;" @change="rangeDateOnChange"/>
                    </a-form-model-item>


                </span>
                <a-form-model-item>
                    <a v-if="!expansion" @click="expansion=!expansion">
                        <a-icon type="down"/>
                        展开</a>
                    <a v-else @click="expansion=!expansion">
                        <a-icon type="up"/>
                        收起</a>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button type="primary" html-type="submit">搜索</a-button>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="searchRest">重置</a-button>
                </a-form-model-item>

            </a-form-model>

        <!-- 表格开始 -->
        <a-table :columns="columns" :rowKey="record => record.id" :dataSource="dataSource" :pagination="pagination"
                 :loading="loading" @change="handleTableChange"
                 bordered>


            <template slot="type" slot-scope="text, record">

                    <span :class="'text-'+record.type ">
                 {{ $exMod.findDict(TaskTypeOPT, record.type) }}
                    </span>


            </template>

            <template slot="status" slot-scope="text, record">

                <span :class="'text-'+record.status ">
                {{ $exMod.findDict(TaskStatusOPT, record.status) }}
                    </span>
            </template>

            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">

                <span v-if="record.status<=1">
                <a-popconfirm :title="`确定要终止这个任务吗?`" @confirm="() => finishTask(record)"><a>终止</a>
                </a-popconfirm>
                <a-divider type="vertical"/>
                    </span>
                <a @click="openEdit(record)">详情</a>

            </template>
        </a-table>

        <detailBox v-if="detailShow" :record="detailRecord" @closeModal="closeEdit"/>

    </a-card>
</template>
<script>
    import {
        pagination,
        taskListTable
    } from '../public/colums.js';
    import {
        taskList,
        taskStop
    } from '../public/http.js';
    import {dictLoad} from "../../../util/internal.api";


    export default {

        components: {
            detailBox: () => import('./detail')
        },

        data() {
            return {
                detailShow: false, //打开编辑器
                detailRecord: {}, //正在编辑的记录

                ArticleShow: false,
                articleHotelId: null,

                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: taskListTable, //表头管理
                searchForm: {},
                expansion: false,

                TaskTypeOPT: [],
                TaskStatusOPT: [],


            };
        },
        methods: {

            rangeDateOnChange(date, dateString) {
                this.searchForm.beginDate = dateString[0];
                this.searchForm.endDate = dateString[1];
            },
            searchRest() {
                this.searchForm = {
                    code: '',
                    name: '',
                    description: '',
                }
                this.getTableList()
            },
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                taskList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.detailRecord = obj;
                this.detailShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.detailShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0 终止停车任务
            finishTask(record) {
                this.loading = true;
                let data = {status: 3}
                taskStop(record.id, data).then(res => {
                    this.$exMod.ajaxMessage(res);
                    if (res.code === 0) {
                        this.getTableList();
                    }
                    this.loading = false;
                });
            },
            //数据初始化
            async init() {
                await dictLoad("ParkingTaskType").then(res => this.TaskTypeOPT = res);
                await dictLoad("ParkingTaskStatus").then(res => this.TaskStatusOPT = res);
                this.getTableList();
            },

            openArticleModal(record) {

                this.ArticleShow = true;
                this.articleHotelId = record.id
            }


        },
        created() {
            this.init();
        }
    };
</script>
